<template>
  <div id="reportPieChart" :style="{ width, height }"></div>
</template>

<script setup lang="ts">
import type { SunnyResult } from "@/types/sunnyResult/type";
import { init, type EChartsType } from "echarts";
import { onMounted, onUnmounted, ref } from "vue";
import { nextTick } from "vue";
import { useChartStore } from "@/stores/chartStore";

const chartStore = useChartStore();
//定义一个普通变量作为成员变量，方便各个方法调用。
let chart: EChartsType;
//不能使用ref格式，虽然内容是一样的，但是会导致echarts报错。
// const chart=ref<EChartsType>();

const props = defineProps({
  width: { type: String, default: "100%" },
  height: { type: String, default: "300px" },
  chartData: { type: Object as () => SunnyResult, required: true },
});

onMounted(() => {
  //防止div还没加载的时候就开始去进行chart的初始化，等到vue完成一个tick的HTML元素更新之后再进行操作。
  nextTick(() => {
    initChart();
  }).then(() => {
    if (chart) chartStore.listenResize(chart);
  });
});

/**
 * 完成事件的解绑
 */
onUnmounted(() => {
  if (chart) chartStore.removeListener(chart);
});

function initChart() {
  chart = init(document.getElementById("reportPieChart") as HTMLDivElement);
  chart.setOption({
    title: {
      show: true,
      text: "项目用例执行状态",
      textStyle: {
        fontSize: 20,
        color: "#409EFF",
        fontWeight: "bold",
      },
      textAlign: "center",
      left: "50%",
      padding: 5,
    },

    tooltip: {
      trigger: "item",
      //formatter设置弹窗中显示内容的格式
      formatter: "{b} : {c}  ({d}%)",
    },
    legend: {
      top: "bottom",
      left: "center",
    },
    series: [
      {
        name: "用例执行统计",
        type: "pie",
        radius: [20, 60],
        center: ["50%", "50%"],
        roseType: "radius",
        itemStyle: {
          borderRadius: 1,
          color: function (params: any) {
            const colorList = ["#67C23A", "#E6A23C", "#F56C6C"];
            return colorList[params.dataIndex];
          },
        },
        data: [
          { value: props.chartData.passCount, name: "通过数" },
          { value: props.chartData.skippedCount, name: "未执行数" },
          { value: props.chartData.failCount, name: "失败数" },
        ],
      },
    ],
  });
}
</script>

<style scoped>
div {
  color: rgb(254, 242, 0);
}
</style>
